<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="arr[0]">
    <h1>{{arr}}---{{obj}}</h1>
  </div>
  <script>
    // vue2 data的数据 通过 Object.defineProperty() 实现双向数据绑定的
    // 数组内容是值类型(不会被get set), 内容如果是对象（会get,set)
    // 重写了数组的七大方法，进一步提升对数组的操作
    //pop push reverse shift sort splice unshift--->只要调用7个方法之一，就会更新页面

    var vm = new Vue({
      el: "#app",
      data: {
        firstName: "李",
        obj: {
          name: 'lili'
        },
        arr: [10, 20]
      },
      mounted() {//模板编译之后，数据是更新的，渲染已经完成，因此页面没有更新
        // 数据更新+页面更新

        // 1.强制更新页面
        // this.arr[2] = 500;
        // this.obj.name = "zhang";
        // console.log(this);

        // this.$forceUpdate()

        //2.this.$set(对象/数组,key/index,value)
        // this.$set(this.arr, 2, 520)
        // this.$set(this.obj,"name","zhangsan")

        //3.数组可用--重写的7大方法
        // pop push reverse shift sort splice unshift--->只要调用7个方法之一，就会更新页面
        // this.arr.push(600);


        //    this.arr[2]=500;
        //    this.obj.name="lisi";

        //    console.log(this.arr);
        //    console.log(this.obj);



        // delete (this.obj.name)
        // this.$forceUpdate()

        this.$delete(this.obj, "name")
      },
      created() {

      }
    })
    console.log(vm)

  </script>
</body>

</html>